<link rel="stylesheet" media="screen, print" href="{{ URL::asset('_third/layui/css/layui.css') }}">
<style>
.chat-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
}

.chat-container ul {
    padding: 0;
    margin: 0;
}

.chat-container li {
    list-style: none;

}

.chat-list li {
    width: 288px;
    height: 80px;
    display: flex;
    padding: 21px 20px;
    position: relative;
}


.chat-left {
    height: 100%;
    width: 288px;
}

.chat-right {
    height: 100%;
    flex: 1;
    background: #F6F6F6;
}

.chat-left-top {
    position: relative;
    margin: 30px 20px 20px;
}

.user-icon-box,
.search-icon {
    position: absolute;
}

.search-icon {
    width: 16px;
    height: 16px;
    top: 8px;
    left: 7px;
}

.user-icon-box {
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: #2C5DAD;
    border-radius: 4px;
    border: 1px solid #F3F5FC;
}

.chat-left-top input {
    width: 206px;
    height: 32px;
    background: #F8F8F8;
    border-radius: 4px;
    border: 1px solid #F3F5FC;
    padding-left: 27px;
}

.user-icon-box {
    width: 32px;
    height: 32px;
}


.chat-item-avater,
.dialoguse-icon img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.chat-item-avater {
    margin-right: 10px;
}

.chat-item-avater img {
    width: 100%;
    height: 100%;
}

.user-info-row {
    width: 120px;
    height: 20px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: normal;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
}

.user-info-row span:nth-child(2),
.chat-right-top span:nth-child(2) {
    margin-left: 3px;
}

.user-chat-tips {
    height: 17px;
    max-width: 154px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: normal;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    text-align: left;
    font-style: normal;
}

.chat-item-times {
    position: relative;
    width: 56px;
    height: 31px;
}

.chat-item-times .time {
    position: absolute;
    width: 56px;
    height: 14px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: normal;
    font-size: 10px;
    color: #999999;
    line-height: 14px;
    text-align: left;
    font-style: normal;
}

.chat-item-times .bell img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 12px;
    float: left;
}

.chat-window {
    padding-left: 40px !important;
    padding-right: 40px !important;
    height: calc(100% - 215px);
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
}

.chat-right-top {
    /* width: 155px; */
    height: 25px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
    margin: 25px 40px 15px 40px;
}

.input-field {
    position: relative;
    border-top: 1px solid #E2E2E2;
    height: 150px;
    bottom:0;
}

.chat-status {
    align-self: flex-end;
}

.chat-status span {
    display: inline-block;
    /* width: 20px; */
    height: 14px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-size: 10px;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    color: #333333;
}

.unread {
    font-weight: bold;
    margin-left: 8px;
}

.read {
    font-weight: lighter;
    margin-right: 8px;
}

.chat-dialogue {
    display: flex;
    margin-bottom: 82px;
}

.dialoguse-content {
    padding: 9px 17px 9px 21px;
    background: #FFFFFF;
    border-radius: 0px 16px 16px 16px;
    font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    font-weight: normal;
    font-size: 16px;
    /* line-height: 22px; */
    text-align: left;
    font-style: normal;
}

.first-party {
    justify-self: flex-start;
}

.second-party {
    justify-self: flex-end;
}

.first-party .dialoguse-content {
    color: #333333;
    border-radius: 0px 16px 16px 16px;
}

.second-party .dialoguse-content {
    color: #fff;
    background: #2C5DAD;
    border-radius: 16px 0 16px 16px;
}

.first-party .dialoguse-icon img {
    margin-right: 15px;
}

.second-party .dialoguse-icon img {
    margin-left: 15px;
}

.field-toolbar {
    margin-top: 24px;
    margin-left: 40px;
}

.field-toolbar img {
    width: 20px;
    height: 18px;
}

.send-btn {
    position: absolute;
    right: 40px;
    bottom: auto;
    width: 120px;
    height: 42px;
    background: #2C5DAD;
    border-radius: 8px;
}

.send-btn span {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 42px;
    color: #fff;
}

.isHiden {
    display: none;
}

.chat-top {
    background-color: #F6F6F6;
}

.chat-current {
    background-color: #2C5DAD;

}

.current-row {
    color: #fff !important;
}

.chat-normal {
    background: #fff;
}

.user-list {
    position: absolute;
    left: 288px;
    top: 26px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #fff;
    width: 265px;
    height: 442px;
    box-sizing: border-box;
}

.to-top-oper {
    position: absolute;
    top: 35px;
    left: 210px;
    width: 84px;
    padding: 5px;
    text-align: center;
    background-color: #fff;
    z-index: 99999;
}

.to-top-oper .to-top,
.to-top-oper .remove,
.to-top-oper .cancel-top{
    border-radius: 5px;
}


.to-top-oper .to-top img {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

.to-top-oper .remove, .to-top-oper .cancel-top{
    margin-top: 5px;
}

.to-top-oper .remove img {
    width: 10px;
    height: 12px;
    margin-right: 6px;
}

.tree-title {
    width: 265px;
    height: 50px;
    background: #E7F0FF;
    position: relative;
    padding: 14px 20px;
    box-sizing: border-box;
}

.history img {
    width: 16px;
    height: 16px;
}

.title-text,
.history {
    position: absolute
}

.title-text {
    /* width: 48px; */
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #2C5DAD;
    line-height: 22px;
    text-align: left;
    font-style: normal;
}

.history {
    right: 20px;

}

.arrow-user {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #E7F0FF;
    transform: rotate(45deg);
    left: -5px;
    top: 20px;
}

#user-tree {
    width: 265px;
    height: 392px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    overflow: auto;
}


.is-select {
    z-index:999;
    height:18px;
    background-color: #F6F6F6;
}

.is-select:hover{
background:#D9D9D9;
}

#handInput{
background: #F6F6F6 !important;
padding:0;
margin-top:10px;
margin-left: 40px;
border:none;
resize:none;
max-width: 600px;
height: 80px;
overflow:auto;
}

/* layui tree  样式覆盖 */
.layui-tree-main{
width:100% !important;
}

.layui-tree-entry{
padding: 10px 0 !important;
height: 40px !important;
}
</style>
<main id="js-page-content" role="main" class="page-content "
    style="background: linear-gradient(180deg, #F8F6F9 0%, #FAF8FB 100%);">
    <div class="chat-container">
        <div class="chat-left">
            <div class="chat-left-top">
                <img class="search-icon" src="/web/img/chat/chat-search.png" alt="">
                <input type="text" placeholder="搜索联系人姓名或职能" value="" onblur="handleSearch(event)" clearable>
                <div class="user-icon-box" onclick="showUserList()">
                    <img class='user-icon' src="/web/img/chat/chat-user.png" alt="">
                </div>
            </div>
            <ul id="chatlist" class="chat-list">
            </ul>
        </div>
        <div class="chat-right">
            <div class="chat-right-top">
                <span>张老师</span><span>|</span><span>计算机学院</span>
            </div>
            <ul id="chatwindow" class="chat-window">


            </ul>
            <div class="input-field">
                <div class="field-toolbar"><img src="/web/img/chat/chat-file.png" alt=""></div>
                <div class="send-btn" onclick="sendMessgae()"><span>发送</span></div>
                <textarea class="form-control" id="handInput" rows="4"  style="resize: none;"></textarea>
            </div>
        </div>
        <div id="userList" class="user-list isHiden">
            <div class="tree-title">
                <div class="arrow-user"></div>
                <div class="title-text">联系人</div>
                <div class="history" onclick="hidenUserList()"><img src="/web/img/chat/chat-packup.png" alt=""></div>
            </div>
            <div id="user-tree"></div>
        </div>
    </div>
</main>
<script src="{{ URL::asset('_third/layui/layui.js') }}"></script>
<script>
var data = [{
    title: '9',
    name: '蓝兔',
    id: '9',
    parentId: 1,
}, {
    title: '10',
    id: '10',
    name: '紫兔',
    parentId: 1,
}, {
    title: '11',
    id: '11',
    name: '红兔',
    parentId: 1,
}]
var treeData = [{
    title: '1',
    name: '白兔',
    id: '1',
    children: [{
        title: '1-1',
        name: '蓝兔',
        id: '1-1',
        parentId: 1,
    }, {
        title: '1-2',
        id: '1-2',
        name: '紫兔',
        parentId: 1,
    }, {
        title: '1-3',
        id: '1-3',
        name: '红兔',
        parentId: 1,
    }]
}, {
    title: '2',
    id: '2',
    name: '绿兔',
    parentId: -1,
    children: [{
        title: '2-1',
        id: '2-1',
        name: '灰兔',
        parentId: 2,
    }, {
        title: '2-2',
        id: '2-2',
        name: '橙兔',
        parentId: 2,
    }]
}, {
    title: '3',
    id: '3',
    name: '粉兔',
    parentId: -1,
    children: [{
        title: '3-1',
        id: '3-1',
        name: '橙兔',
        parentId: 3,
    }, {
        title: '3-2',
        name: '青兔',
        id: '3-2',
        parentId: 3,
    }]
}];

renderData(data)

var backData=JSON.parse(JSON.stringify(data))

//渲染左侧消息列表
function renderData(data) {
    let html = ''
    data.forEach((item, index) => {
        html += getMessageList(item)
    })
    $('#chatlist').html(html)
}

layui.use(function() {
    var tree = layui.tree;
    // 渲染
    tree.render({
        elem: '#user-tree',
        id: 'treeId', // 设置实例唯一索引
        data: treeData,
        showLine: false, // 是否开启连接线
        // edit: ['add', 'update', 'del'], //右侧操作图标
        text: {
            defaultNodeName: '未命名节点', // 节点默认名称
            none: '暂无数据' // 数据为空时的提示文本
        },
        click: function(obj) {
            currentDode = obj.data; // 得到当前点击的节点数据
            addChatListItem(obj.data)
        },
    });
});

//联系人下拉显示切换
function showUserList() {
    $('#userList').toggleClass('isHiden')
}

//联系人下拉隐藏
function hidenUserList() {
    $('#userList').addClass('isHiden')
}


//点击联系人下拉新增消息列 置顶高亮显示
function addChatListItem(treeNode) {
    data = data.map(item => {
        return {
            ...item,
            isCurrent: false
        }
    })
    data.unshift({
        ...treeNode,
        isCurrent: true
    })
    renderData(data)
}

//查询联系人 渲染数据
function handleSearch(event) {
    event.target.value ?
        (renderData(data.filter(item => item.name.includes(event.target.value)))) :
        renderData(data)
}

//点击显示行操作
function setCurrentChat(id) {
    data = data.map(item => {
        if (item.id === id) {
            item.isCurrent = true;
        } else {
            item.isCurrent = false;
        }
        return item;
    })
    console.log('点击显示行操作', data);
    renderData(data)
}

//删除行
function handleRemove(event,id) {
     event.stopPropagation();
    data = data.filter(item => item.id !== id)
    renderData(data)
}

//置顶或取消置顶
function handleTop(event,id,type) {
    event.stopPropagation();
    let index=0
    const currItem = data.find(item => item.id === id)
    const currIndex= data.findIndex(item => item.id === id)
     //取消置顶的元素显示在未置顶第一个
    if(type==='cancelTop'){
     index=data.filter(item=>item.isTop).length-1
     currItem.isTop=false
    }else{
     currItem.isTop=true
    }
   data = data.filter(item => item.id !== id)
   data.splice(index, 0, currItem)
   renderData(data)
}


var currContext=null
//右键显示操作
function handleContent(event,id){
event.preventDefault();
currContext=id
 data = data.map(item => {
        if (item.id === id) {
            item.showOper = true;
        } else {
            item.showOper = false;
        }
        return item;
    })
    renderData(data)
}

// 操作完成隐藏工具栏
document.addEventListener("click",function(e){
  if(!$(e.target).hasClass("to-top-oper")){
      data = data.map(item => {
              item.showOper = false;
              return item;
          })
    renderData(data)
  }
})

// 展开当前操作节点的所有父节点
function openTree(treeData, id) {
    var nodeId = familyTree(treeData, id);
    console.log('当前所有父节点');
    console.log(nodeId);

    function each(data) {
        data.forEach(e => {
            if (nodeId.indexOf(e.id) != -1) {
                e.spread = true;
            }
            if (e.children && e.children.length > 0) {
                each(e.children);
            }
        })
    }
    each(treeData);
    return treeData;
};

// 查找当前节点的所有父节点
function familyTree(arr1, id) {
    var temp = [];
    var forFn = function(arr, id) {
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i]
            if (item.id === id) {
                temp.push(item.id);
                forFn(arr1, item.parentId);
                break
            } else {
                if (item.children) {
                    forFn(item.children, id);
                }
            }
        }
    }
    forFn(arr1, id);
    return temp;
};

// 在树中查找当前节点
function findNodeById(treeData, targetId) {
    // 遍历当前层级的节点
    for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i];
        // 检查当前节点的ID是否与目标ID匹配
        if (node.id === targetId) {
            return node; // 如果匹配，返回该节点
        }
        // 如果当前节点有子节点，递归地在子节点中查找
        if (node.children && node.children.length > 0) {
            const foundNode = findNodeById(node.children, targetId);
            if (foundNode) {
                return foundNode; // 如果在子节点中找到匹配的节点，返回该节点
            }
        }
    }
    // 如果没有找到匹配的节点，返回null
    return null;
}


//获取消息列表
function getMessageList(dataItem) {
    return `
     <li class="${dataItem.isCurrent?'chat-current':dataItem.isTop?'chat-top':'chat-normal'}" onclick="setCurrentChat('${dataItem.id}')" oncontextmenu="handleContent(event,'${dataItem.id}')">
                    <div class="chat-item-avater"><img src="/web/img/chat/chat-avater.png" alt=""></div>
                    <div class="chat-item-info">
                        <div class="user-info-row ${dataItem.isCurrent?'current-row':''}"><span>${dataItem.name}</span><span>|</span><span>计算机学院</span></div>
                        <div class="user-chat-tips ${dataItem.isCurrent?'current-row':''}">你好你好你好你好你好你好</div>
                    </div>
                    <div class="chat-item-times">
                        <div class="time ${dataItem.isCurrent?'current-row':''}"><span>2024/12/13</span></div>
                    </div>
                    <div id='${dataItem.id}_oper' class="to-top-oper  ${dataItem.showOper?'':'isHiden'}" >
                        <div class="to-top is-select ${!dataItem.isTop&&dataItem.id===currContext?'':'isHiden'}"" onclick="handleTop(event,'${dataItem.id}','toTop')"><img src="/web/img/chat/chat-to-top.png" alt="">置顶</div>
                        <div class="remove is-select" onclick="handleRemove(event,'${dataItem.id}')"><img src="/web/img/chat/chat-remove.png" alt="">删除</div>
                        <div class="cancel-top is-select ${dataItem.isTop&&dataItem.id===currContext?'':'isHiden'}" onclick="handleTop(event,'${dataItem.id}','cancelTop')">取消置顶</div>
                    </div>
                </li>
    `
}

//输入添加回车事件
document.getElementById('handInput').addEventListener('keydown', function(event) {
    if (event.keyCode === 13) { // 13 是 Enter 键的 keyCode
      sendMessgae()
    }
  });;


  // 对话框添加滚动监听事件
document.getElementById('chatwindow').addEventListener('scroll', function() {
    // 检查是否滚动到了顶部
    if (this.scrollTop === 0) {
        alert('已滚动到顶部');

    }
 });


//发送消息
function sendMessgae() {
   const val=$('#handInput').val()
   //左边对话框样式
    $('#chatwindow').append(getChatContentleft(val))
    $('#chatwindow').append(getChatContentright(val))
    $('#handInput').val('')
    $("#chatwindow").scrollTop($("#chatwindow")[0].scrollHeight);
}


//获取聊天窗对方的消息样式
function getChatContentleft(val) {
    return `
    <li class="chat-dialogue first-party">
                    <div class="dialoguse-icon"><img src="/web/img/chat/chat-avater.png" alt=""></div>
                    <div class="dialoguse-content"><span>${val}</span></div>
                    <div class="chat-status"><span class="unread">未读</span><span class="read">已读</span></div>
                </li>
    `
}

//获取聊天窗自己的消息样式
function getChatContentright(val) {
    return `
    <li class="chat-dialogue second-party">
                    <div class="chat-status"><span class="unread">未读</span><span class="read">已读</span></div>
                    <div class="dialoguse-content"><span>${val}</span></div>
                    <div class="dialoguse-icon"><img src="/web/img/chat/chat-mine.png" alt=""></div>
                </li>
    `
}
</script>
